<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3.js</title>
    <!-- <script src="d3.v7.min.js"></script> -->
    <script src="jquery-3.6.4.js"></script>
    <script src="d3.v5.js"></script>
    <style>
       

    </style>
</head>
<body>

    <svg></svg>
   
</body>
<script>
  
  const api = "..json"
  document.addEventListener("DomContentLoaded",function(event){
    fetch(api)
        .then(function(response){
            return response.json();
        })
        .then(function(data){
            var parsedData = parseData(data);
            drawChart(paredData);
        })
        .catch(function(err){
            console.log(err);
        })
  })
  function parseData(data){
    var arr=[];
    for(var i in data.bpi){
        arr.push(
            {
                date:new Date(i),
                value: +data.bpi[i]
            }
        )
    }
    return arr;
  }

  function drawChart(data){
    var svgWidth =600,svgHeight =400;
    var margin = {top:20,righ:20,bottom:30,left:50};
    var width = svgWidth - margin.left -margin.right;
    var height = svgHeight - margin.top - margin.bottom;

    var svg = d3.select("svg")
    .attr('width',svgWidth )
    .attr('height',svgHeight )

    var g  = svg.append("g")
    .attr('transform', "translate("+margin.left+","+margin.top+")" )

    var x = d3.scaleTime()
    .rangeRound([0,width])

    var y = d3.scalelinear()
    .rangeRound([height,0])

    var line = d3.line()
        .x(function(d){ return x(d.date)})
        .y(function(d){return y(d.value)})
   
    x.domain(d3.extent(data,function(d){ return d.data}));
    y.domain(d3.extent(data,function(d){return d.value}));
    
    g.append("g")
        .attr('transform', "translate(0,"+ height+" )")
        .call(d3.axisBottom(x))
        .select(".domain")
        .remove();
    
    g.append("g")
       .call(d3.axisLeft(y))
       .append("text")
       .attr('fill','#000' )
       .attr('transfomr', "ratote(-90)")
       .attr('y', 6)
        .attr('dy', "0.71em" )
        .attr('text-anchor',"end" )
        .attr('Price($)')

    g.append("path")
      .datum(data)
      .attr('fill', "none" )
      .attr('stroke', "steeblue")
      .attr('stroke-linejoin',"round" )
      .attr('stroke-linecap', "round")
      .attr('stroke-width', 1.5 )
      .attr('d',line )
  }
</script>

</html>